<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Floating Action Button - Translucent</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Floating Action Button - Translucent</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content fullscreen>
        <ion-grid>
          <ion-row>
            <ion-col size="6"><f class="red"></f></ion-col>
            <ion-col size="6"><f class="green"></f></ion-col>
            <ion-col size="6"><f class="blue"></f></ion-col>
            <ion-col size="6"><f class="yellow"></f></ion-col>
            <ion-col size="6"><f class="pink"></f></ion-col>
            <ion-col size="6"><f class="purple"></f></ion-col>
            <ion-col size="6"><f class="black"></f></ion-col>
            <ion-col size="6"><f class="orange"></f></ion-col>
          </ion-row>
        </ion-grid>

        <pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
        <ion-button>Test</ion-button>

        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
          <ion-fab-list>
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab1')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-back-circle"></ion-icon></ion-fab-button>
          <ion-fab-list side="start">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab2')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-forward-circle"></ion-icon></ion-fab-button>
          <ion-fab-list side="end">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab3')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-up-circle"></ion-icon></ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab4')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed">
          <ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="share"></ion-icon></ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="bottom">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="start">
            <ion-fab-button translucent onclick="openSocial('instagram', 'fab5')" color="light"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="end">
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab horizontal="end" vertical="center" slot="fixed">
          <ion-fab-button translucent color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
        </ion-fab>
      </ion-content>

      <ion-footer>
        <ion-toolbar>
          <ion-title>Footer</ion-title>
        </ion-toolbar>
      </ion-footer>

    <script>
      function insertAfter(el, referenceNode) {
        referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
      }

      function insertLog(message) {
        console.log(message);
        var el = document.querySelector('#log');
        const oldHTML = el.innerHTML;
        el.innerHTML = oldHTML + '\n' + message;
      }

      function add() {
        var newEle = document.createElement('f');
        var ref = document.querySelector('f');
        insertAfter(newEle, ref);
        insertLog('add');
      }

      function clickMainFAB(container) {
        let message = 'Clicked open social menu';
        insertLog(message);

        openLists(container);
      }

      function openSocial(network, container) {
        let message = 'Share in ' + network;
        insertLog(message);

        openLists(container);
      }

      function openLists(container) {
        var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');

        for (var i = 0; i < fabLists.length; i++) {
          fabLists[i].activated = true;
        }
      }
    </script>

    <style>
      f {
        display: block;
        background: blue;

        width: 100%;
        height: 200px;
        margin: 20px auto;
      }

      .red {
        background-color: #ea445a;
      }

      .green {
        background-color: #76d672;
      }

      .blue {
        background-color: #3478f6;
      }

      .yellow {
        background-color: #ffff80;
      }

      .pink {
        background-color: #ff6b86;
      }

      .purple {
        background-color: #7e34f6;
      }

      .black {
        background-color: #000;
      }

      .orange {
        background-color: #f69234;
      }

    </style>
  </ion-app>
</body>

</html>
